<script>
import {defineComponent} from 'vue';
import axios from 'axios'; // 导入 axios 库（需要先安装）

import router from "@/router";
import $ from 'jquery';

export default defineComponent({
    name: "header",
    data() {
        return {
          session:null,
            isLogin: localStorage.hasOwnProperty("is"),
            form: {
                keyword: ""
            },
            allCategoryLists: "",
            userInfo :   [],
            signIn: " Sign In ",
            username: ""
        };
    },

    // 在组件创建时发送请求获取数据
    created() {
            this.fetchData();
    },
    methods: {
        login() {
            this.isLogin=true;
        },
        fetchData() {
            // 发送请求到后端获取数据，判断登录是否成功，如果成功，将isLogin赋值为true，并传输username
            axios.get('http://localhost:8090/account/get_loginUser_info')
                .then(response => {
                    this.userInfo = response.data;
                    if(this.userInfo.status == 0){
                        this.isLogin = true;
                        localStorage.setItem("is",1);
                        console.log(this.isLogin+"!!!");
                    }
                    // 请求成功，处理后端返回的数据
                    this.username = response.data.data.id;
                })
                .catch(error => {
                    // 请求失败，处理错误
                    console.error(error);
                });
        },
        signOut(){
          axios.post('http://localhost:8090/account/signout')
          localStorage.clear();
        },
      test(){
          location.reload();
      },
        submitSearch(event) {
            axios.defaults.withCredentials = true;
            // event.preventDefault();
            // 发送请求到后端传输数据，并将表单信息（form.product）传输给后端
            axios
            .post('http://localhost:8090/catalog/search', {
                keyword: this.form.keyword
            },{
                headers: {
                'Content-Type': 'application/x-www-form-urlencoded',
                }
            })
            .then(response => {
              setTimeout(this.test, 500);
                // 请求成功处理
                // 跳转到第二个界面，传递搜索结果
                console.log(response.data);
                this.$router.push({
                    path: '/catalog/searchProduct',
                    query: { products: JSON.stringify(response.data) }
                });
            })
            .catch(error => {
                // 请求失败处理
                console.error(error);
            });
        },
    },
    computed:{
        refreshPage() {
            return window.location.href; // 刷新当前页面
        }
    }
},

)

</script>

<template>
<head>
    <meta charset="UTF-8">
    <title>MyPetStore</title>
    <link rel="stylesheet" href="../../assets/css/top.css" type="text/css">
    <link href="../../assets/css/jquery-ui.min.css" rel="StyleSheet"  type="text/css"/>

    <meta name="generator"
          content="HTML Tidy for Linux/x86 (vers 1st November 2002), see www.w3.org" />
    <title>MyPetStore Demo</title>
    <meta content="text/html; charset=UTF-8" http-equiv="Content-Type" />
    <meta http-equiv="Cache-Control" content="max-age=0" />
    <meta http-equiv="Cache-Control" content="no-cache" />
    <meta http-equiv="expires" content="0" />
    <meta http-equiv="Expires" content="Tue, 01 Jan 1980 1:00:00 GMT" />
    <meta http-equiv="Pragma" content="no-cache" />
</head>

<body>
<header>
  <div class="top">
    <div class="menu">
      <a href="/catalog/main"><img src="../../assets/images/mainform.png" /></a><label>MainForm</label>
    </div>
    <div class="menu">
      <a href="/catalog/main"><img src="../../assets/images/shop.png" /></a><label> Shopping</label>
      <div class="options">
        <a href="/catalog/DOGS">DOGS</a>
        <a href="/catalog/FISH">FISH</a>
        <a href="/catalog/CATS">CATS</a>
        <a href="/catalog/REPTILES">REPTILES</a>
        <a href="/catalog/BIRDS">BIRDS</a>
      </div>
    </div>
    <div id="Search" class="Search">
      <div id="SearchContent">
        <!-- 将submit按钮点击事件设置好 -->
        <form>
          <input id="searchbar" type="text" v-model="form.keyword" size="14"/>
          <input  type="button" name="searchProducts" value="Search" @click="submitSearch"/>
          <font color="black" v-if="isLogin && username!=null">用户名：{{ username }}</font>
          <font color="black" v-if="!isLogin && !username">未登录</font>
        </form>
      </div>
    </div>
<div class="menu">
  <a href="/help"><img src="../../assets/images/help.png" /></a><label>Help</label>
</div>
<!--    <div class="menu">-->
<!--      <img src="../../assets/images/set.png" /><label>Manage</label>-->
<!--      <div v-if="!isLogin"  class="options">-->
<!--        <a href="/account/Signin"><img src="../../assets/images/signin.png" /> Sign In</a>-->
<!--      </div>-->
<!--      <div v-if="isLogin" class="options">-->
<!--        <a href="/manage/orderManage"><img src="../../assets/images/order.png" />Order</a>-->
<!--        <a href="/manage/productManage"><img src="../../assets/images/shop.png" />Product</a>-->
<!--        <a href="/manage/userManage"><img src="../../assets/images/account.png" />User</a>-->
<!--      </div>-->
<!--    </div>-->
    <div class="menu">
      <a href="/account/MyAccount"><img src="../../assets/images/account.png" /></a><label>MyAccount</label>
      <div v-if="!isLogin"  class="options">
        <a href="/account/Signin"><img src="../../assets/images/signin.png" /> Sign In</a>
      </div>
      <div v-if="isLogin" class="options">
        <a href="/catalog/main" @click="signOut"><img src="../../assets/images/signout.png" />Sign Out</a>
        <a href="/account/MyAccount"><img src="../../assets/images/account.png" />My Account</a>
        <a href="/account/allOrders"><img src="../../assets/images/order.png" />Order</a>
        <a href="/Cart"><img src="../../assets/images/cart.png" />Cart</a>
      </div>
    </div>
  </div>





</header>
</body>

</template>

<style scoped>
  @import "@/assets/css/top.css";
</style>


